{% include 'base.html' %}
<div class = "page">
{% load url from future %}
<a href="{% url 'interview.views.index' %}"><div class="header"><h1>Recommendations</h1></div></a>
<div class="login">
	{% if user.is_authenticated %}	
		<h1> You are logged in as {{user}}</h1>
	<form method = post action="{% url 'interview.views.LogUserOut' %}">
	{% csrf_token %}
		<input name="userAction" type = "submit" value="Logout"/>

	</form>
	{% if user.is_staff %}
		<a href="{% url 'admin:index' %}"><h1>Change, Add, Delete: Facts, Rules, and Questions</h1></a>
	{% endif %}
	{% else %}
	<form method = post action="{% url 'interview.views.LogUserIn' %}">
	{% csrf_token %}
		<table>
		<tr>
			<td align="left">Username:</td><td align="right"><input type="text" name="username" /></td>
		</tr>
		<tr>
			<td align="left">Password:<td align="right"><input type="password" name= "password" /></td>
		</tr>
		<tr>
			<td align="right"><input name="userAction" type = "submit" value="Login"/></td>
			<td align="right"><a href="{% url 'interview.views.register' %}">Create a new Account</a></td>		
		</tr>
		
		</table>
	</form>

	{% endif %}
</div>
{% if explanations or answered_questions %}
<!-- {{debug_info}} -->
<!-- <P>"script is read"</P> -->
{% for answered_question in answered_questions %}
{% endfor %}
<!-- script from google chart tools here in head. in body it's only one line of code. -->
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Question');
        data.addColumn('string', 'Answer');
        data.addColumn('string', 'ToolTip');
        data.addRows([
			{% for answered_question in answered_questions %}
		  		[{v:'{{answered_question.1}}', f:'{{answered_question.1}}<div style="font-style:italic">{{answered_question.3}}</div>'}, '{{answered_question.2}}', '{{answered_question.1}}'],
		  	{% endfor %}
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {size:'large', allowHtml:true});
        google.visualization.events.addListener(chart, 'select', selectionHandler);
        
        function selectionHandler() {
        	var selectedData = chart.getSelection(), row;
        	row = selectedData[0].row;
        	window.location = "{% url 'interview.views.answers' %}"; 
      	}
      }
    </script>

{% else %}
<!--<P>"script is not read"</P> -->
{% endif %}

<div class="graph">
	<div id='chart_div'></div>
</div>
<div class = "recommendations">
<h1>{{ state }}</h1>
<H1>Recommendations:</H1>
<!--
{% for info in debug_info %}
<P> {{info}} </P>
{% endfor %}
-->

{% if explanations %}

{% for explanation in explanations %}
<h1>{{explanation.0}}</h1>
<h2>{{explanation.1}}</h2>
{% endfor %}
<P>
{{fact}}
</P>

<!-- debugging-->
{% for reasoning_to_display in reasonings_to_display %}
<h1>{{reasoning_to_display}}</h1>
{% endfor %}
<!-- debugging-->
		
{% else %}
	<H2>No Recommendations for you.</H2>
{% endif %}
<A HREF="{% url 'interview.views.questions' %}">Go to the next Questions.</A>

</div>

</div>
</BODY>
</HTML>
